<template>
  <div>
    <ContentHeader :title="store.student.name + ' - ' + store.lesson.title + ' - 学习记录'" v-if="store.student && store.lesson"></ContentHeader>
    <ContentBody v-loading="store.loading">
      <el-table :data="store.items"
        :stripe="true"
        :highlight-current-row="true"
      >
        <el-table-column property="id" width="80" />
        <el-table-column property="chapterTitle" label="章节标题" />
        <el-table-column property="enterTime" label="进入时间" :formatter="(row: any) => timeFormatter(row.enterTime, 'yyyy/MM/DD HH:mm:ss')" />
        <el-table-column property="leaveTime" label="离开时间" :formatter="(row: any) => timeFormatter(row.leaveTime, 'yyyy/MM/DD HH:mm:ss')" />
        <el-table-column property="studyTimes" label="学习时长（秒）" />
      </el-table>
      <template #pagination>
        <el-pagination 
          background 
          hideOnSinglePage
          layout="prev, pager, next" 
          :total="store.pager.total"
          :page-size="store.pager.pageSize"
          @current-change="handlePageChange" 
        />
      </template>
    </ContentBody>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useStudentLessonStudyStore } from '@/stores/studentLessonStudy'
import { ElMessage } from 'element-plus';
import { timeFormatter } from '@/utils/utils';

const store = useStudentLessonStudyStore()
const router = useRouter()
const route = useRoute()

const handlePageChange = (page: number) => {
  store.changePage(page, store.search.limit)
}

onMounted(() => {
  if (route.params.accountId && route.params.lessonId) {
    store.loadItems(parseInt(route.params.accountId as string), parseInt(route.params.lessonId as string))
  } else {
    ElMessage.error('非法参数')
    router.back()
  }
})
</script>